<template>
	<view class="y">
		<view class="da1 y">
			<view v-for="item in from" class="da2">
				<view class="da3">
					<span style="padding-left: 10rpx;">{{item.name}}</span><!-- 名字 -->
					<span>{{item.tel}}</span><!-- 电话 -->
				</view>
				<view class="da3 a">
					<span class=" da">{{item.province}}</span><!-- 省 -->
					<span class="da">{{item.city}}</span><!-- 市 -->
					<span class="da">{{item.county}}</span><!-- 区 -->
					<span class="da">{{item.addressDetail}}</span><!-- 详细地址 -->
				</view>
				<view>
					<span @click="edit(item)" class="bianji">修改</span>
				</view>

				<!-- <view class="x ann0">
					<span>设为默认地址</span>
					按钮
					<switch checked class="ann"></switch>
				</view> -->

				<button class="tian" @click="tianjia">+新增一个地址</button>
			</view>
		</view>
		<span class="dibu">没有更多了~</span>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: {}
			}
		},
		onShow() {
			this.$api.get('/wx/address/list', this.from).then(res => {
				// console.log(res)
				this.from = res.data.list;
			})
		},
		methods: {

			tianjia() {
				uni.navigateTo({
					url: '/pages/wode/dizhi'
				})

			},
			edit(item) {
				uni.navigateTo({
					url: `/pages/wode/dizhi?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		},
	}
</script>

<style>
	.x {
		display: flex;
		flex-direction: row;
	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.tian {
		width: 600rpx;
		background-color: crimson;
		border-radius: 40rpx;
		position: fixed;
		bottom: 40rpx;
		left: 70rpx;
	}

	.a {
		padding-bottom: 20rpx;
		/* 下边框,实线、边框颜色、和宽度 */
		border-bottom: solid 1rpx red;
	}

	.da {
		margin-left: 10rpx;
		padding-top: 20rpx;
	}

	.da2 {
		width: 650rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #ffaa7f;
		border-radius: 40rpx;


	}

	.da3 {
		padding-top: 20rpx;
		padding-left: 10rpx;
	}

	.da1 {
		background-color: antiquewhite;
		/* margin: 0 auto; */
	}

	.ann0 {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.ann {
		transform: scale(0.7);
	}

	.dibu {
		margin: 0 auto;
	}

	.bianji {
		display: flex;
		flex-direction: row-reverse;
		padding-right: 20rpx;
		padding-top: 10rpx;
	}
</style>